// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
import echarts from 'echarts'
const staticOption = {
  color: ['#ffa63c'],
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '3%',
    data: [{
      name: '',
      icon: 'roundRect',
      textStyle: {
        fontSize: 24,
        color: '#bad3ff'
      }
    }],
    itemWidth: 20,
    itemHeight: 6
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '5%',
    top: '18%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      offset: 10,
      boundaryGap: false,
      data: [],
      axisLabel: {
        fontSize: 18,
        color: '#cccccc',
        interval: 0
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 18,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(203, 216, 228, 0.2)',
          width: 2
        }
      }
    }
  ],
  dataZoom: [{
    type: 'inside',
    startValue: 0,
    endValue: 11,
    zoomLock: true
  }],
  series: [
    {
      name: '',
      type: 'line',
      symbolSize: 12,
      smooth: true,
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#ffffff'
        }
      },
      itemStyle: {
        borderColor: '#fadb71',
        borderWidth: 3
      },
      lineStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#ffa63c'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#fadb71'
          }
          ], false),
          width: 6
        }
      },
      data: []
    }
  ]
}

const staticOptionMid = {
  color: ['#ffa63c'],
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '3%',
    data: [{
      name: '',
      icon: 'roundRect',
      textStyle: {
        fontSize: 16,
        color: '#bad3ff'
      }
    }],
    itemWidth: 20,
    itemHeight: 6
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '5%',
    top: '18%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      offset: 10,
      boundaryGap: false,
      data: [],
      axisLabel: {
        fontSize: 16,
        color: '#cccccc',
        interval: 0
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 16,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(203, 216, 228, 0.2)',
          width: 2
        }
      }
    }
  ],
  dataZoom: [{
    type: 'inside',
    startValue: 0,
    endValue: 10,
    zoomLock: true
  }],
  series: [
    {
      name: '',
      type: 'line',
      symbolSize: 9,
      smooth: true,
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#ffffff'
        }
      },
      itemStyle: {
        borderColor: '#fadb71',
        borderWidth: 3
      },
      lineStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#ffa63c'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#fadb71'
          }
          ], false),
          width: 4
        }
      },
      data: []
    }
  ]
}

const staticOptionSmall = {
  color: ['#ffa63c'],
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '3%',
    data: [{
      name: '',
      icon: 'roundRect',
      textStyle: {
        fontSize: 18,
        color: '#bad3ff'
      }
    }],
    itemWidth: 20,
    itemHeight: 6
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '5%',
    top: '18%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      offset: 10,
      boundaryGap: false,
      data: [],
      axisLabel: {
        fontSize: 14,
        color: '#cccccc',
        interval: 0
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 14,
        color: '#cccccc'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#496dc8',
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(203, 216, 228, 0.2)',
          width: 2
        }
      }
    }
  ],
  dataZoom: [{
    type: 'inside',
    startValue: 0,
    endValue: 12,
    zoomLock: true
  }],
  series: [
    {
      name: '',
      type: 'line',
      symbolSize: 12,
      smooth: true,
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#ffffff'
        }
      },
      itemStyle: {
        borderColor: '#fadb71',
        borderWidth: 3
      },
      lineStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#fadb71'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#ffa63c'
          }
          ], false),
          width: 6
        }
      },
      data: []
    }
  ]
}

// 备选颜色，有需求则进行循环
// const colors = ['#0066ff', '#f16f3c', '#00ab47', '#df0050', '#394cff', '#702af2', '#8b0000', '#828e00', '#3700c4', '#730054']
// let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // 装配数据 必须使用箭头函数
    this.option.series[0].name = additionalOptions.seriesName
    this.option.legend.data[0].name = additionalOptions.seriesName
    additionalOptions.xAxisData.forEach((p1) => {
      this.option.xAxis[0].data.push(p1)
    })
    additionalOptions.seriesData.forEach((p1) => {
      this.option.series[0].data.push(p1)
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
    this.option.xAxis[0].data = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
